Client-Side Data Fetching

import React from "react";
import { useCurrentRouteData, useParams, Link } from "catalyst-core";

const BreedDetails = () => {
  const { breed } = useParams();
  const { data, error, isFetching } = useCurrentRouteData();

  if (isFetching) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  const images = data?.message || [];

  return (
    <div style={{ padding: "20px" }}>
      <Link to="/" style={{ color: "#4CAF50" }}>
        ← Back to Breeds
      </Link>
      <h1 style={{ textTransform: "capitalize" }}>{breed} Dogs</h1>
      <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
        {images.slice(0, 8).map((url, index) => (
          <img
            key={index}
            src={url}
            alt={`${breed} ${index + 1}`}
            style={{ width: "250px", height: "250px", objectFit: "cover", borderRadius: "8px" }}
          />
        ))}
      </div>
    </div>
  );
};

// Server-side fetcher
BreedDetails.serverFetcher = async ({ params }) => {
  const response = await fetch(`https://dog.ceo/api/breed/${params.breed}/images`);
  return response.json();
};

// Client-side fetcher
BreedDetails.clientFetcher = async ({ params }) => {
  const response = await fetch(`https://dog.ceo/api/breed/${params.breed}/images`);
  return response.json();
};

export default BreedDetails;

// Add after serverFetcher
Home.clientFetcher = async () => {
  const response = await fetch("https://dog.ceo/api/breeds/list/all");
  return response.json();
};